<template>
  <transition name="fade">
    <div class="form-area" v-show="isFormShow">
      <form action="" class="container">
        <a class="cross" @click.prevent="closeForm"><img src="../../assets/cross.png" alt=""></a>
        <h2 class="black">报名参评</h2>
        <div class="form-item">
          <label for="name">联系人</label>
          <div class="input-wrapper">
            <input type="text" id="name" v-model="name">
          </div>
        </div>
        <div class="form-item">
          <label for="ctcode">联系电话</label>
          <div class="input-wrapper">
            <input type="tel" id="tel" v-model="mobile">
          </div>
        </div>
        <div class="form-item">
          <label for="company">公司名称</label>
          <div class="input-wrapper">
            <input type="text" id="company" v-model="company">
          </div>
        </div>
        <div class="form-item">
          <label for="office">职务</label>
          <div class="input-wrapper">
            <input type="text" id="office" v-model="office">
          </div>
        </div>
        <div class="form-item">
          <label for="email">电子邮箱</label>
          <div class="input-wrapper">
            <input type="text" id="email" v-model="email">
          </div>
        </div>
        <a href="" class="form-submit" @click.prevent="submit"><img src="../../assets/button-m.png" alt=""></a>
        <transition name="fade">
          <div class="success" v-show="success==='success'">
            <img src="../../assets/success.jpg" alt="">
            <span class="title">提交成功</span>
            <p>*报名须知：组委会会根据联系信息在2个工作日内与您取得联系，完成参评表单填写及后续流程。</p>
          </div>
        </transition>
        <transition name="fade">
          <div class="success" v-show="success==='error'">
            <span>提交失败，接口错误</span>
          </div>
        </transition>
      </form>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'form-area',
  props: ['isFormShow'],
  data () {
    return {
      name: '',
      mobile: '',
      office: '',
      company: '',
      email: '',
      success: ''
    }
  },
  methods: {
    closeForm() {
      this.$emit('update:isFormShow', false)
    },
    submit() {
      if(this.name === '') {
        return alert('请输入联系人')
      }
      if(!(/^1[345678]\d{9}$/.test(this.mobile))){
        return alert('请输入正确的手机号码')
      }
      if(this.company === '') {
        return alert('请输入公司名称')
      }
      if(this.office === '') {
        return alert('请输入职务')
      }
      if(!(/@/.test(this.email))){
        return alert('请输入正确的电子邮箱')
      }
      var xmlhttp = new XMLHttpRequest()
      var params = "?form_id=cAfxus&field_1=" + this.name + "&field_2=" + this.mobile + "&field_3=" + this.office + "&field_4=" + this.company + "&field_5=" + this.email
      var url = 'https://activity.wallstreetcn.com/app/form.php' + params
      xmlhttp.onreadystatechange =  () => {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            this.success = 'success'
            setTimeout(() => {
              this.$emit('update:isFormShow', false)
            }, 2000)
          } else {
            return alert('提交失败，接口错误')
          }
        }
      }
      xmlhttp.open('GET', url, true)
      xmlhttp.send(null)
    }
  }
}
</script>

<style scoped>
.form-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .47)
}
.form-area>.container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
  width: 88%;
  max-width: 40rem;
  background:#ffffff;
  border-radius: 6px;
}

.cross {
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  z-index: 10;
}
.cross>img {
  width: 1.6rem;
}

.form-item {
  margin-bottom: 1.33rem;
}
input, select, option {
  font-size: 1.1rem;
  color:#7a6131;
}
label {
  display: inline-block;
  width: 4.44rem;
  font-size: 1.1rem;
  color:#7a6131;
}
.input-wrapper {
  display: inline-block;
  width: 20rem;
  height: 2.55rem;
  line-height: 2.55rem;
  padding: 0 1rem;
  background:#f7f7f7;
  border:1px solid #edd498;
  border-radius:4px;
}
.input-wrapper input {
  display: inline-block;
}
.form-submit {
  width: 25rem;
}
.form-submit>img {
  width: 100%;
}

.success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius:4px;
}
.success span.title {
  font-size: 1.33rem;
  color: #2e2413;
  margin: 1rem 0 2rem;;
}
.success>img {
  width: 9rem;
}
.success p{
  font-size: 1rem;
  color: #9f8851;
  width: 88%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>